* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

html,
body {
    width: 100vw;
    height: 100vh;
}


.selfchoose1 {
    padding-bottom:1rem;
    >ul:nth-of-type(1) {
        padding: 0rem 1.691rem 0rem 0.274rem;
        height: 0.395rem;
        align-items: center;
        display: flex;
        justify-content: space-between;

        li {
            font-size: 0.217rem;
            font-weight: bold;

            img {
                width: 0.282rem;
            }
        }
    }

    >div:nth-of-type(1) {
        position: relative;
        margin-top: 0.242rem;
        justify-content: center;
        display: flex;
        align-items: center;

        i::before {
            position: absolute;
            top: 30%;
            left: 1.549rem;
            font-size: 0.205rem;
        }

        a {
            text-indent: 1.317rem;
            padding-left: 0.423rem;
            width: 4.581rem;
            height: 0.487rem;
            line-height: 0.487rem;
            border-radius: 0.262rem;
            font-size: 0.149rem;
            box-shadow: 0px 0px 4px 4px #f8f8f8;
        }
    }

    >div:nth-of-type(2) {
        margin-top: 0.209rem;
        padding: 0rem 0.174rem 0rem 0.174rem;

        >p {
            font-size: 0.109rem;
        }

        >ul:nth-of-type(1) {
            margin-top: 0.105rem;
            height: 0.334rem;
            line-height: 0.334rem;
            position: relative;
            display: flex;
            justify-content: space-between;

            li {
                flex: 2;
                font-size: 0.153rem;
                color: #a8a8a8;

                &:nth-of-type(2) {
                    text-align: end;
                    flex: 2;
                }

                &:nth-of-type(3) {
                    text-align: end;
                    padding-right: 0.2rem;
                }
            }

            div {
                position: absolute;
                right: 1%;
                top: 20%;

                p:nth-of-type(1) {
                    border-right: 0.048rem solid transparent;
                    border-left: 0.048rem solid transparent;
                    border-bottom: 0.052rem solid #eeeeee;
                    width: 0;
                    height: 0;
                }

                p:nth-of-type(2) {
                    margin-top: 0.032rem;
                    border-right: 0.048rem solid transparent;
                    border-left: 0.048rem solid transparent;
                    border-top: 0.052rem solid #d6423a;
                    width: 0;
                    height: 0;
                }
            }
        }

        >ul:nth-of-type(2) {
            .bgColor {
                background-color: white;
            }

            >li {
                background-color: white;
                margin-top: 0.141rem;
                height: 0.639rem;

                >ul {
                    display: flex;
                    justify-content: space-between;

                    li {
                        flex: 2;
                        font-size: 0.149rem;

                        &:nth-of-type(1) {
                            padding-top: 0.117rem;

                            >p:nth-of-type(1) {
                                font-size: 0.181rem;
                            }

                            >p:nth-of-type(2) {
                                margin-top: 0.015rem;
                                font-size: 0.121rem;
                            }
                        }

                        &:nth-of-type(2) {
                            line-height: 0.796rem;
                            text-align: end;
                            color: #d6423a;
                            padding-right: 0.2rem;
                            flex: 2;
                        }

                        &:nth-of-type(3) {
                            line-height: 0.796rem;
                            text-align: end;
                            color: #d6423a;
                        }
                    }
                }
            }
        }
    }

    .tipBtn {
        margin: 0.422rem auto;
        box-shadow: 0px 0px 4px 4px #f8f8f8;
        width: 2.311rem;
        height: 0.492rem;
        line-height: 0.492rem;
        border-radius: 0.227rem;
        text-align: center;
        font-size: 0.181rem;
        -webkit-border-radius: 0.227rem;
        -moz-border-radius: 0.227rem;
        -ms-border-radius: 0.227rem;
        -o-border-radius: 0.227rem;
    }
}


.selfchoose2 {
    display:none;
    >ul:nth-of-type(1) {
        padding: 0rem 1.691rem 0rem 0.274rem;
        height: 0.395rem;
        align-items: center;
        display: flex;

        li {
            font-size: 0.201rem;
            font-weight: bold;

            &:nth-of-type(2) {
                margin-left: 0.1rem;
            }
        }
    }

    >div:nth-of-type(1) {
        position: relative;
        margin-top: 0.242rem;
        justify-content: center;
        display: flex;

        i::before {
            position: absolute;
            top: 30%;
            left: 1.649rem;
            font-size: 0.205rem;
        }

        input {
            text-indent: 1.727rem;
            width: 4.581rem;
            height: 0.487rem;
            border-radius: 0.246rem;
            font-size: 0.149rem;
            outline: none;
            border: none;
            box-shadow: 0px 0px 4px 4px #f8f8f8;
        }
    }

    >ul:nth-of-type(2) {
        * {
            //让标签对事件不起作用
            pointer-events: none;
        }

        padding:0.362rem 0.189rem 0rem 0.197rem;

        >li {
            p {
                font-size: 0.25rem;
                font-weight: bold;
            }
        }

        >ul {
            margin-top: 0.137rem;

            >li {
                //恢复标签对事件起作用
                pointer-events: auto;

                >ul {
                    display: flex;
                    height: 0.632rem;
                    align-items: center;

                    li {
                        &:nth-of-type(1) {
                            width: 0.205rem;
                            height: 0.205rem;
                            border-radius: 0.064rem;
                            font-size: 0.109rem;
                            line-height: 0.205rem;
                            text-align: center;
                            color: white;
                        }

                        &:nth-of-type(2) {
                            text-indent: 0.101rem;
                            font-size: 0.177rem;
                        }

                        &:nth-of-type(3) {
                            margin-left: 0.165rem;
                            font-size: 0.125rem;
                            color: #d6423a;
                        }

                        &:nth-of-type(4) {
                            flex: 1;
                            display: flex;
                            justify-content: flex-end;

                            p {
                                text-align: center;
                                line-height: 0.358rem;
                                height: 0.358rem;
                                width: 0.825rem;
                                border-radius: 0.193rem;
                                box-shadow: 0px 0px 3px 2px #faebeb;
                                font-size: 0.149rem;
                            }
                        }
                    }
                }
            }

            >li:nth-of-type(1) {
                ul {
                    li:nth-of-type(1) {
                        background-color: #d6423a;
                    }
                }
            }

            >li:nth-of-type(2) {
                ul {
                    li:nth-of-type(1) {
                        background-color: #db8b44;
                    }
                }
            }

            >li:nth-of-type(3) {
                ul {
                    li:nth-of-type(1) {
                        background-color: #e1b84d;
                    }
                }
            }

            >li:nth-of-type(4) {
                ul {
                    li:nth-of-type(1) {
                        background-color: #999999;
                    }
                }
            }
        }

        .hotStock {
            p {
                pointer-events: auto;
            }
        }
    }

    >ul:nth-of-type(3) {
        .colorStyle {
            color: #79b0f9;
        }

        * {
            //让标签对事件不起作用
            pointer-events: none;
        }

        padding:0.411rem 0.189rem 0rem 0.201rem;

        >li.clickLink {
            //恢复标签对事件起作用
            pointer-events: auto;
            margin-top: 0.238rem;

            &:nth-of-type(1) {
                margin-top: 0rem;
            }

            >ul {
                height: 0.403rem;
                display: flex;
                align-items: center;
                justify-content: space-between;

                >li {
                    flex: 1;
                }

                >li:nth-of-type(1) {
                    flex: 2;

                    >p:nth-of-type(1) {
                        font-size: 0.197rem;
                    }

                    >p:nth-of-type(2) {
                        font-size: 0.105rem;
                        color: #999999;
                    }
                }

                >li:nth-of-type(2) {
                    color: #d6423a;
                    font-size: 0.153rem;
                }

                >li:nth-of-type(3) {
                    color: #439629;
                    font-size: 0.153rem;
                }

                >li:nth-of-type(4) {
                    p {
                        pointer-events: auto;
                        width: 0.853rem;
                        height: 0.37rem;
                        border-radius: 0.193rem;
                        color: #323232;
                        font-size: 0.153rem;
                        text-align: center;
                        line-height: 0.37rem;
                        box-shadow: 0px 0px 2px 3px #f6f6f6;
                    }
                }
            }
        }
    }
}

.transaction {
    display: none;
    >ul:nth-of-type(1) {
        padding: 0rem 1.61rem 0rem 0.193rem;
        height: 0.395rem;
        align-items: center;
        display: flex;

        >li {
            i::before {
                font-size: 0.205rem;
            }

            font-weight: bold;
            font-size:0.205rem;

            &:nth-of-type(2) {
                margin-left: 0.1rem;
            }
        }
    }

    >ul:nth-of-type(2) {
        padding: 0.306rem 0.3rem 0rem 0.25rem;
        display: flex;
        justify-content: space-between;

        >li {
            &:nth-of-type(1) {
                margin-right: 0.3rem;

                >ul {
                    >li:nth-of-type(1) {
                        padding-top: 0.032rem;
                        font-size: 0.282rem;
                        color: #d6423a;
                    }

                    >li:nth-of-type(2) {
                        margin-top: 0.125rem;

                        ul {
                            li {
                                font-size: 0.137rem;
                                color: #d6423a;

                                &:nth-of-type(2) {
                                    text-indent: 0.04rem;
                                }
                            }
                        }
                    }
                }
            }

            &:nth-of-type(2) {
                >ul {
                    >li:nth-of-type(1) {
                        >ul {
                            >li:nth-of-type(2) {
                                color: #d6423a;
                            }
                        }
                    }

                    >li:nth-of-type(2) {
                        >ul {
                            >li:nth-of-type(2) {
                                color: #439629;
                            }
                        }
                    }
                }
            }

            &:nth-of-type(3) {
                >ul {
                    >li:nth-of-type(1) {
                        >ul {
                            >li:nth-of-type(2) {
                                color: #439629;
                            }
                        }
                    }
                }
            }

            &:nth-of-type(2),
            &:nth-of-type(3),
            &:nth-of-type(4) {
                >ul {
                    >li {
                        height: 0.169rem;

                        >ul {
                            display: flex;
                            align-items: center;

                            >li:nth-of-type(2) {
                                padding-left: 0.141rem;
                            }
                        }

                        &:nth-of-type(2) {
                            margin-top: 0.35rem;
                        }
                    }
                }
            }

            >ul {
                display: flex;
                flex-direction: column;

                >li {
                    >ul {
                        display: flex;

                        >li:nth-of-type(1) {
                            font-size: 0.177rem;
                            color: #666666;
                        }

                        >li:nth-of-type(2) {
                            font-size: 0.113rem;
                        }
                    }
                }
            }
        }
    }

    >ul:nth-of-type(3) {
        margin-top: 0.209rem;
        padding: 0rem 2.258rem 0rem 0.265rem;
        height: 0.201rem;
        display: flex;
        line-height: 0.201rem;
        align-items: center;
        justify-content: space-between;

        >li {
            font-size: 0.149rem;
        }

        >li:nth-of-type(1) {
            position: relative;
            font-size: 0.201rem;
            z-index: 2;

            &::after {
                content: '';
                z-index: -1;
                position: absolute;
                bottom: -0.055rem;
                left: -0.025rem;
                width: 0.467rem;
                height: 0.113rem;
                background-color: #e89e98;
            }
        }
    }

    >div:nth-of-type(1) {
        width: 4.545rem;
        height: 3rem;
        border: 0.02rem solid #eeeeee;
        margin: 0.189rem auto;
    }

    >div:nth-of-type(2) {
        // >li
        margin-top: 0.463rem;
        padding: 0rem 0.205rem 0rem 0.197rem;

        >p {
            font-size: 0.229rem;
            font-weight: bold;
            z-index: 2;
            position: relative;

            &::after {
                content: '';
                z-index: -1;
                position: absolute;
                bottom: 0rem;
                left: -0.01rem;
                width: 0.467rem;
                height: 0.113rem;
                background-color: #e89e98;
            }
        }

        >div {
            .colorstyle {
                text-align: center;
                font-size: 0.181rem;
            }

            >ul {
                margin-top: 0.395rem;

                >li {
                    height: 1.039rem;

                    >p {
                        font-size: 0.181rem;
                    }

                    >ul {
                        display: flex;
                        justify-content: space-between;

                        >li {
                            margin-top: 0.15rem;
                            color: #999999;
                        }

                        >li:nth-of-type(1) {
                            font-size: 0.153rem;
                        }

                        >li:nth-of-type(2) {
                            font-size: 0.105rem;
                        }
                    }
                }
            }
        }
    }
}

footer {
    z-index: 100;
    * {
        pointer-events: none;
    }

    position: fixed;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    height: 0.652rem;
    background-color: white;
    overflow: hidden;

    >ul {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: space-between;
        padding: 0rem 0.821rem 0rem 0.205rem;

        >li {
            pointer-events: auto;
            font-size: 0.189rem;

            i {
                width: 100%;
                text-align: center;
            }

            &:nth-of-type(1) {
                >p {
                    width: 1.24rem;
                    height: 0.463rem;
                    border-radius: 0.233rem;
                    background: linear-gradient(to right, #e06830, #db5333, #d84a36);
                    color: white;
                    text-align: center;
                    line-height: 0.463rem;
                }
            }
        }
    }
}

.mask {
    z-index: 9;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #4c4c4c;

    >div {
        padding-top: 0.363rem;
        background-color: white;
        width: 4.358rem;
        height: 2.613rem;
        border-radius: 0.091rem;
        -webkit-border-radius: 0.091rem;
        -moz-border-radius: 0.091rem;
        -ms-border-radius: 0.091rem;
        -o-border-radius: 0.091rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);

        >p:nth-of-type(1) {
            text-align: center;
            line-height: 0.446rem;
            font-size: 0.249rem;
            font-weight: bold;
        }

        >p:nth-of-type(2) {
            color: #727374;
            width: 3.399rem;
            margin: 0.098rem auto;
            text-align: center;
            font-size: 0.189rem;
        }

        >ul {
            margin-top: 0.46rem;
            border-top: 0.008rem solid #ebedf0;
            display: flex;
            justify-content: space-between;

            li {
                font-weight: bold;
                flex: 1;
                font-size: 0.219rem;
                text-align: center;
                line-height: 0.718rem;

                &:nth-of-type(1) {
                    border-right: 0.008rem solid #ebedf0;
                }

                &:nth-of-type(2) {
                    color: #db323e;
                }
            }
        }
    }
}
